<template>
  <view class="router-view bcl-active">
    <view class="text-center pt-40" v-if="alipays.length == 0 && !loading">
      <view>您还未进行支付绑定!</view>

      <navigator url="/user/setting/binding/pay">
        <button class="uni-button uni-button-main mt-20">
          去绑定
        </button>
      </navigator>
    </view>

    <view v-else>
        <view v-if="is_all==0">
          
        <view class="bcl-white text-center p-30 border border-bottom" style="display: flex;justify-content: space-between;">
          <view style="width:50%;float:right">
            <view class="text-tips mb-15">
              您当前余额<text class="cl-main">￥{{ config.balance || 0 }}</text>
            </view>
            <view class="text-tips mb-15">
             <checkbox :checked="seletedAll" @click="_seletedAll" >全部提现</checkbox>
            </view>
          </view>  
          <view style="width:50%;">
          <!-- 提现账号 -->
          <view class="text-center" v-if="alipays.length">
            <view>提现账号</view>
            <radio-group @change="radioChange"  class="mt-20">
              <label
                class="box box-center mb-10"
                v-for="(item, index) in alipays"
                :key="item.value"
              >
                <view class="middle">
                  <radio
                    :value="item.alipay_account"
                    :checked="index === current"
                  />
                </view>
                <view class="middle">{{ item.alipay_account }}</view>
              </label>
            </radio-group>
          </view>
          </view>  
        </view>
        <!-- 提现方式 -->
          <view class="pay-type mt-30 text-center">
                <view class="text-center mt-15">提现方式</view>
                <view class=" p-20 text-center active">
                  <view class="icon inline-block">
                    <text
                      class="icon icon-ali-pay fz-36"
                      style="color: #0093ff;"
                    ></text>
                  </view>
                  <view class="mt-10">支付宝提现</view>
                </view>
                
              </view>

            <view class="text-center">
              <view class="fz-20 bold">输入提现余额</view>
              <view class="uni-input bcl-white m-15">
                <input
                  type="number"
                  placeholder="￥提现金额"
                  v-model="postCashValue"
                  disabled
                />
              </view>
            </view>
        </view>
        <view v-else>
            <view class="bcl-white text-center p-30 border border-bottom" style="display: flex;justify-content: space-between;">
              <view style="width:50%;float:right">
                <view class="text-tips mb-15">
                  任务资产<text class="cl-main">￥{{ this.task_total || 0 }}</text>
                </view>
                <view class="text-tips mb-15">
                  其他资产<text class="cl-main">￥{{ this.other_money || 0 }}</text>
                </view>
                <view class="text-tips mb-15">
                  任务金额<text class="cl-main">￥{{ config.balance || 0 }}</text>
                </view>
              </view>  
              <view style="width:50%;">
              <!-- 提现账号 -->
              <view class="text-center" v-if="alipays.length">
                <view>提现账号</view>
                <radio-group @change="radioChange"  class="mt-20">
                  <label
                    class="box box-center mb-10"
                    v-for="(item, index) in alipays"
                    :key="item.value"
                  >
                    <view class="middle">
                      <radio
                        :value="item.alipay_account"
                        :checked="index === current"
                      />
                    </view>
                    <view class="middle">{{ item.alipay_account }}</view>
                  </label>
                </radio-group>
              </view>
              </view>  
            </view>
            <!-- 提现方式 -->
              <view class="pay-type mt-30 text-center">
                <view class="text-center mt-15">提现方式</view>
                <view class=" p-20 text-center active">
                  <view class="icon inline-block">
                    <text
                      class="icon icon-ali-pay fz-36"
                      style="color: #0093ff;"
                    ></text>
                  </view>
                  <view class="mt-10">支付宝提现</view>
                </view>
                
              </view>

            <view class="text-center">
              <view class="fz-20 bold">输入提现余额</view>
              <view class="uni-input bcl-white m-15" v-if="this.balance>0">
                <input
                  type="number"
                  placeholder="￥提现金额"
                  v-model="postCashValue"
                />
              </view>
              <view class="uni-input bcl-white m-15" v-else>
                您当前余额不足,无法提现。
              </view>
            </view>
            <view class="list">
              <view>
                <checkbox :checked="Allseleted" @click="_Allseleted" ></checkbox>全选
              </view>
              <view class="list-box"  v-for="(item,index) in this.my_tasks_arr" :key="index">
                <checkbox-group @change="seletedStatus($event, item)" checked>
                  <checkbox :value="item.id" :checked="item.checked">
                  <i style="color:red">{{item.bounty}}</i>{{item.title}}
                  </checkbox>
                </checkbox-group>
              </view>
            </view>
        </view>
      

      <!-- 扣费提示 -->
      <view class="container cl-second fz-12" style="line-height: 2;">
        <view>银行提现手续费扣费标准：</view>
        <view>A. 200元以下（含200元） 单笔收费2元</view>
        <view>B. 200元以上 单笔收费1%, 最高收费50元</view>
        <view>C. 单次最低提现金额10元</view>
        <view>D. 最高提现最大金额10000元</view>
      </view>
    </view>

    <!-- 支付底部栏 -->

    <view
      class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
      :class="{ 'bcl-active': alipays.length == 0 && !loading }"
      @tap="submitel" v-if="is_all==0"
      >确认</view
    >
    <view
      class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
      :class="{ 'bcl-active': alipays.length == 0 && !loading }"
      @tap="submit" v-else
      >确认</view
    >

    <!-- 密码输入模态框 -->
    <uni-dialog v-model="passwordDialogShow" :showBtn="false">
      <view class="text-center pl-20 pr-20 pb-20" slot="content">
        <view class="mb-20 bold fz-15">请输入支付密码</view>
        <view class="uni-input bcl-white">
          <input
            type="password"
            focus
            @submit="onPasswordDone"
            v-model="password"
          />
        </view>
        <button class="uni-button uni-button-main mt-20" @tap="onPasswordDone">
          完成
        </button>
      </view>
    </uni-dialog>

    <!-- 支付成功模态框 -->
    <uni-dialog v-model="isPaySuccess" :showBtn="false">
      <view class="text-center pl-20 pr-20 pb-20" slot="content">
        <view class="fz-15 bold">
          <text class="icon icon-success cl-main fz-30"></text>
          <text>已提交到后台审核，请耐心等待!</text>
        </view>

        <navigator open-type="navigateBack">
          <button class="uni-button uni-button-main mt-20">
            返回
          </button>
        </navigator>
      </view>
    </uni-dialog>
  </view>
</template>

<script>
import { listAlipay } from "@/apis/user";
import { moneyConfig, cashOut,getcashoutInfo } from "@/apis/pay";
import uniDialog from "@/components/dialog";

export default {
  data() {
    return {
      config: {},
      payType: 0, // 0 支付宝提现
      postCashValue: "",
      password: "",
      outTypes: [
        {
          id: 1,
          name: "支付宝提现",
        },
      ],
      alipays: [],
      passwordDialogShow: false,
      isPaySuccess: false,
      loading: true,
      current: 0,
      is_all:0,//是否使用了 全部提现
      is_pall:0,
      Allseleted:false,
      seletedAll: false,
      balance:0, //账号余额
      alipayAccount:0,//支付宝账号
      bankAccount:0,//银行账号
      cashRule:0,//充值说明
      my_tasks_arr:'',//我的任务
      task_total:0,//任务总额
      bounty:0,//任务赏金
      other_money:0,//其他金额
      checkList: [], //选中值
    };
  },

  onLoad(options) {
    this.moneyConfig();
    this.listAlipay();
    this.getcashoutInfolist();
  },

  methods: {
    //删除
    delete(arr,val) {
      var index = arr.indexOf(val);
      if (index > -1) {
        arr.splice(index, 1);
      }
    },
    //单选
    seletedStatus(e,item) {
      console.log(e);
      console.log(item);
      let id = item.id;
      let value = e.detail.value[0];
      if(!item.checked){
        this.checkList.push(value);
        item.checked=true;
        this.bounty += parseFloat(item.bounty);
      }else{
        this.delete(this.checkList,id);
        item.checked=false;
        this.bounty -= parseFloat(item.bounty);
      }
      console.log(this.checkList);
      
        
        
        
      },
    //全选
    async _Allseleted(){
      this.bounty=0;
      if(!this.Allseleted){
          this.Allseleted=true
					this.my_tasks_arr.map(item=>{
            item.checked=true;
            this.checkList.push(item.id);
            this.bounty += parseFloat(item.bounty);
					})
					console.log(this.bounty);
				}else{
          this.Allseleted=false
          this.my_tasks_arr.map(item=>{
            item.checked=false;
            this.checkList=[];
            this.bounty=0;
					})
					console.log('false')
				}
    },
    //全部提现
    async _seletedAll(){
      if(!this.seletedAll){
        this.seletedAll=true
        this.postCashValue = this.balance;
      }else{
        this.seletedAll=false
      }
    },
    //获取列表数据
    async getcashoutInfolist(){
      let {data} = await getcashoutInfo();
      console.log('获取列表数据',data);
      this.is_all = data.is_all;
      this.balance= data.balance; //账号余额
      this.alipayAccount= data.alipayAccount;//支付宝账号
      this.bankAccount= data.bankAccount;//银行账号
      this.cashRule= data.cashRule;//充值说明
      this.my_tasks_arr= data.my_tasks_arr.data;//我的任务
      this.task_total= data.task_total;//任务总额
      this.bounty= data.bounty;//任务赏金
      this.other_money= data.other_money;//其他金额
      this.my_tasks_arr.forEach(item=>{
        item.checked=false;
      })
      console.log(this.my_tasks_arr);
      
    },

    /**
     * 获取钱包余额
     */
    async moneyConfig() {
      let { code, data } = await moneyConfig();
      if (code == 200) this.config = data;
    },

    /**
     * 获取钱包余额
     */
    async listAlipay() {
      let { code, data } = await listAlipay();
      this.loading = false;
      if (code == 200) this.alipays = data;
    },


    /**
     * 提现
     */
    async cashOut() {
      let params ='';
      if(this.is_all==0){
        params = {
          cash: 0,
          cashout_type: 1,
          alternate_password: this.password,
          cashout_account: this.alipays[this.current].alipay_account,
          is_all:this.is_pall,
          bounty:this.postCashValue,
          extend:this.checkList,
        };
      }else{
        params = {
          cash: this.postCashValue,
          cashout_type: 1,
          alternate_password: this.password,
          cashout_account: this.alipays[this.current].alipay_account,
          is_all:this.is_pall,
          bounty:this.bounty,
          extend:this.checkList,
        };
      }
      
      console.log(params);

      let { code, data } = await cashOut(params);

      if (code == 200) {
        this.passwordDialogShow = false;
        this.isPaySuccess = true;
      }
    },

    changePayType(index) {
      this.payType = index;
    },
    submitel(){
      if(this.seletedAll==false)return this.$toast("请选择全部提现！");
      if (this.alipays.length == 0 && !this.loading) return false;
      if (!this.postCashValue) return this.$toast("提现金额不能为空~");
      this.is_pall=1;
      this.passwordDialogShow = true;
    },
    submit() {
      //判断任务金额
      if(this.checkList=='')return this.$toast("请选择关联任务!");
      if (this.alipays.length == 0 && !this.loading) return false;
      if (!this.postCashValue) return this.$toast("提现金额不能为空~");
      if(this.bounty > this.other_moneys)return this.$toast("余额不足，无法提现!");
      this.passwordDialogShow = true;
    },

    radioChange: function(evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },

    /**
     * 密码输入完毕分发
     */
    onPasswordDone() {
      if (!this.password) return this.$toast("密码不能为空~");
      this.cashOut();
    },
  },

  components: {
    uniDialog,
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-bottom: 140upx;

  .wechat-pay-box {
    width: 240upx;
    margin: 0 auto 20upx;
    border: 2upx solid $color-basic;

    &.active {
      background: $color-border-deep;
    }
  }
}
.list{
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  .list-box{
    width: 100%;
    height:30px;
    line-height: 30px;
    margin-top:10px;
    border-bottom: 1px solid #eee;
  }
}
</style>
